import { createApp, createVNode, render } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router/userIndex'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import loadingBar from './components/loadingBar.vue'
import 'animate.css';

const loadingBarVNode = createVNode(loadingBar)
render(loadingBarVNode, document.body)

const app = createApp(App)
app.use(router)

const whiteList = ['/user-index', '/user-login', '/demo1', '/demo2', '/demo3']

router.beforeEach((to, from, next) => {
  loadingBarVNode.component?.exposed?.startLoading()

  document.title = to.meta.title || 'Demo test'

  if (whiteList.includes(to.path) || localStorage.getItem('tolen')) {
    next()
  } else {
    next('/user-login')
  }
})

router.afterEach(() => {
  loadingBarVNode.component?.exposed?.endLoading()
})

app.use(ElementPlus)

app.mount('#app')
